<template>
	<div style="flex: 1" class="content">
		<div style="height: 100%; display: flex; align-items: center; justify-content: center">
			<!-- <canvas style="z-index: 2" ref="cargoOilRef"></canvas> -->

			<div @click="routerPush('/equipment/hyg/2')" style="cursor: pointer">
				<div style="width: 100px; height: 70px; position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%; object-fit: fill" />
					<!-- #1货油汞 -->
					<!-- v-if="Lighthyb(hybData(606, 0, 2))" -->
					<BlinkingLight
						v-if="Lighthyb(hybData(606, 0, 2))"
						:isBlinking="false"
						:position="true"
						:top="17"
						:left="45"></BlinkingLight>
				</div>
				<div style="width: 100px; height: 70px; position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%; object-fit: fill" />
					<!-- #2货油汞 -->
					<BlinkingLight
						v-if="Lighthyb(hybData(606, 1, 2))"
						:isBlinking="false"
						:position="true"
						:top="17"
						:left="45"></BlinkingLight>
				</div>
				<div style="width: 100px; height: 70px; position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%; object-fit: fill" />
					<!-- #3货油汞 -->
					<BlinkingLight
						v-if="Lighthyb(hybData(606, 2, 2))"
						:isBlinking="false"
						:position="true"
						:top="17"
						:left="45"></BlinkingLight>
				</div>
				<div style="width: 100px; height: 70px; position: relative">
					<img :src="huoyou" style="width: 100%; height: 100%; object-fit: fill" />
					<BlinkingLight
						v-if="Lighthyb(hybData(630, 2, 2))"
						:isBlinking="false"
						:position="true"
						:top="17"
						:left="45"></BlinkingLight>
				</div>
			</div>
			<div class="hyfdjBj">
				<!-- 左 -->

				<CargoOilTanks
					left="70"
					top="90"
					:value="hycywDataList?.z553?.currentValue"
					:t="MathValueFormat(hycywDataList?.z552?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z549?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z551?.currentValue)"
					:w="hycywDataList?.z550?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="210"
					top="90"
					:value="hycywDataList?.z541?.currentValue"
					:t="MathValueFormat(hycywDataList?.z540?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z537?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z539?.currentValue)"
					:w="hycywDataList?.z538?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="400"
					top="90"
					:value="hycywDataList?.z529?.currentValue"
					:t="MathValueFormat(hycywDataList?.z528?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z525?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z527?.currentValue)"
					:w="hycywDataList?.z526?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="590"
					top="90"
					:value="hycywDataList?.z517?.currentValue"
					:t="MathValueFormat(hycywDataList?.z516?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z513?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z515?.currentValue)"
					:w="hycywDataList?.z514?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="750"
					top="90"
					:value="hycywDataList?.z505?.currentValue"
					:t="MathValueFormat(hycywDataList?.z504?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z501?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z503?.currentValue)"
					:w="hycywDataList?.z502?.currentValue"></CargoOilTanks>
				<!-- 污油 -->
				<CargoOilTanks
					left="910"
					top="90"
					:value="hycywDataList?.z565?.currentValue"
					:t="MathValueFormat(hycywDataList?.z564?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z561?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z563?.currentValue)"
					:w="hycywDataList?.z562?.currentValue"></CargoOilTanks>
				<!-- 右邊 -->
				<CargoOilTanks
					left="70"
					top="180"
					:value="hycywDataList?.z559?.currentValue"
					:t="MathValueFormat(hycywDataList?.z558?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z555?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z557?.currentValue)"
					:w="hycywDataList?.z556?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="210"
					top="180"
					:value="hycywDataList?.z547?.currentValue"
					:t="MathValueFormat(hycywDataList?.z546?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z543?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z545?.currentValue)"
					:w="hycywDataList?.z544?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="400"
					top="180"
					:value="hycywDataList?.z535?.currentValue"
					:t="MathValueFormat(hycywDataList?.z534?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z531?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z533?.currentValue)"
					:w="hycywDataList?.z532?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="590"
					top="180"
					:value="hycywDataList?.z523?.currentValue"
					:t="MathValueFormat(hycywDataList?.z522?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z519?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z521?.currentValue)"
					:w="hycywDataList?.z520?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="750"
					top="180"
					:value="hycywDataList?.z511?.currentValue"
					:t="MathValueFormat(hycywDataList?.z510?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z507?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z509?.currentValue)"
					:w="hycywDataList?.z508?.currentValue"></CargoOilTanks>
				<CargoOilTanks
					left="910"
					top="180"
					:value="hycywDataList?.z571?.currentValue"
					:t="MathValueFormat(hycywDataList?.z570?.currentValue, 10)"
					:h="MathValueFormat(hycywDataList?.z567?.currentValue, 100)"
					:b="HEXtoDECSymbol(hycywDataList?.z569?.currentValue)"
					:w="hycywDataList?.z568?.currentValue"></CargoOilTanks>
			</div>
			<!-- <div class="hylcBj tstLine">222222222</div> -->
		</div>
		<div style="position: absolute; bottom: 50px; left: 200px; color: #fff">
			<span style="font-size: 20px">货油总立方数</span>
			:{{ MathValueFormat(hycywDataList?.z573?.currentValue, 10) }}m³
		</div>
	</div>
</template>

<script setup>
import { routerPush } from '@/plugins/index.js'
import { initDecimalPlaces } from '@/utils/utils.js'
// 组件
import BlinkingLight from '@/components/BlinkingLight.vue'
// import CardData from './component/layout/cardData.vue'
import CargoOilTanks from './component/models/CargoOilTanks.vue'
import { cargoOilGraphic } from '@/mixins/globalRaphael.js'
import { HEXtoDECSymbols } from '@/utils/utils.js'
import huoyou from '@/assets/image/huoyou.png'
// 图形
let allData = inject('allData')
let hycywDataList = ref({})
console.log(allData, 'allData')
watch(
	() => allData.value,
	(newVal, oldVal) => {
		// console.log(newVal);
		hycywDataList.value = newVal.hycyw
	},
	{
		deep: true
	}
)
let MathValueFormat = computed(() => {
	return (m, divisor = 10) => {
		let num = m ?? 0
		let baseNumber = Math.log10(divisor)
		return (Number(num) / Number(divisor)).toFixed(baseNumber)
	}
})
let HEXtoDECSymbol = computed(() => {
	return (m, divisor) => {
		if (!Number(m)) {
			return 0
		}
		return HEXtoDECSymbols(m, divisor)
	}
})
// let timer = ref(null)

let cargoOilRef = ref(null)
let ctx = ref(null)

//货油泵

let pumpDataList = ref(null)
watch(
	() => allData.value,
	(newVal, oldVal) => {
		let pumpInitData = newVal.hyb || {}
		pumpDataList.value = pumpInitData
	},
	{
		deep: true
	}
)
let hybData = computed(() => {
	return (sort, index, n) => {
		let sorts = 'z' + (sort + index * 8)
		if (!pumpDataList.value) return initDecimalPlaces(n)
		return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
	}
})
const Lighthyb = computed(() => {
	return (value) => {
		return value > 3 ? true : false
	}
})
onMounted(() => {
	// let el = cargoOilRef.value;
	// ctx = el.getContext("2d");
	// el.width = 220;
	// el.height = 500;
	// console.log(el.width, el.height, ctx);
	// cargoOilGraphic({
	//   ctx,
	//   clr: "rgba(192, 192, 192, 1)",
	//   translateX: -900,
	//   translateY: -150,
	// });
	// cargoOilGraphic({
	//   ctx,
	//   clr: "rgba(192, 192, 192, 1)",
	//   translateX: -900,
	//   translateY: -15,
	// });
	// cargoOilGraphic({
	//   ctx,
	//   clr: "rgba(192, 192, 192, 1)",
	//   translateX: -900,
	//   translateY: 120,
	// });
	// cargoOilGraphic({
	//   ctx,
	//   clr: "rgba(192, 192, 192, 1)",
	//   translateX: -900,
	//   translateY: 250,
	// });
	// getEngieDate(timer)
})
onUnmounted(() => {
	// clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	.hyfdjBj {
		position: relative;
		background: url('@/assets/image/hyqt.png') no-repeat;
		background-position: center center;
		// background-size: auto auto;
		background-size: 100% 100%;
		width: 900px;
		height: 332px;
		// background-origin: content-box;
	}
	//  .hylcBj {
	// 	width: 1200px;
	// 	// height: 100%;
	// 	background: url("@/assets/image/hylc.png") no-repeat;
	// 	background-position: center center;
	// 	background-size: 100% 600px;
	// 	background-origin: content-box;
	// }
}
.ss {
	cursor: pointer;
}
</style>
